<template>
    <div class="ls-card">
        <!-- Header 头部 -->
        <div class="m-t-16">
            <el-form ref="form" inline :model="form" label-width="100px" size="small">
                <el-form-item label="状态">
                    <el-select style="width: 280px" v-model="form.status" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="使用时间">
                    <DatePickForm v-model="form.use_time" ></DatePickForm>
                </el-form-item>

                <el-form-item label="" class="m-l-6">
                    <el-button size="mini" type="primary" @click="query">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Component,
    Prop,
    Ref,
    Vue,
    Watch
} from 'vue-property-decorator'

import DatePickForm from '@/components/MyForm/DatePickForm.vue'

@Component({
    components: {
        DatePickForm
    }
})
export default class activationFromQuery extends Vue {

    form = {
        status: '',
        use_time: [],
    }
    // 使用状态；0=未使用；1=已使用；2=已作废
    options: any[] = [
        {
            value: '0',
            label: '未使用'
        },
        {
            value: '1',
            label: '已使用'
        },
        {
            value: '2',
            label: '已作废'
        },
    ]
    
    query() {
        const use_time = this.form.use_time
        let useTimeStr = ''
        if (use_time  && use_time.length) {
            useTimeStr = use_time.join(" - ")
            return this.$emit('query', {
                ...this.form,
                use_time: useTimeStr
            })
        }
        this.$emit('query', {
            ...this.form,
            use_time: ''
        })
    }
   
}
</script>